<html>
<head>
  {include file='common@base/meta'}
  <style>
  </style>
</head>
<body class="hold-transition">
<section class="content" id="content">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>部门
        {:form_dropdown('filter[department_id]',$deptSelect,0,
        'class="form-control js-department_select" ')}</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <label>快速查找<input class="form-control js-search-username" placeholder="请输入姓名或者工号"></label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <button type="button" class="btn btn-default js-show-checked">查看已选</button>
      <button type="button" class="btn btn-default js-all-checked">全部选中</button>
    </div>
  </div>
  <p></p>
  <div class="row" id="js-users">
    <div class="col-xs-12">
      <div class="box box-primary" v-for="userJson" data-dept="{$dept_id}"
           data-dept-parent="{:$dept_all[$dept_id]['parent_id']}">
      </div>
    </div>
  </div>

  {foreach $data as $dept_id=>$vo}
  <div class="box box-primary" data-dept="{$dept_id}" data-dept-parent="{:$dept_all[$dept_id]['parent_id']}">
    <div class="box-header with-border">
      <h5 class="box-title">{$dept_all[$dept_id]['title']}</h5>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-xs btn-success js-dept-checked">全部选中</button>
        <label class="label label-info">已选：<span class="js-user-count">0</span> / <span
          class="js-user-total">0</span></label>
      </div>

    </div>
    <div class="box-body checkbox users">
      <ul class="list-inline" style="width:100%">
        {foreach $vo as $uid=>$u}
        <li style="min-width: 30%;">
          <label>{:form_checkbox('',$uid,false,'class="user_select"')}
            <span class="userinfo"><span class="username">{$u['realname']}</span>
                  <span class="userno"></span></span>
          </label>
        </li>
        {/foreach}
      </ul>
    </div>
  </div>

  {/foreach}
</section>
</body>
{include file='common@base/footer-js'}
<script>
  // can use vuejs
  require(['vue'], function (Vue) {
    var js_users = new Vue({
      el: "#js-users",
      data: function () {
        var userJson = '{$userJson}';
        console.log(userJson);
        
        return {
          userJson: (userJson) ? JSON.parse(userJson) : []
        }
      },
      watch: {},
      methods: {
        select_image: function (id) {
          var _this = this;
          popup_upload_image($(this), function (data) {
            for (var i in data) {
              _this.items.push(data[i]);
            }
          });
        },
        remove: function (e, fileIndex) {
          this.items.splice(fileIndex, 1);
        }
      },
    });
  });
</script>
</body>
</html>
